<%--
    @Description： 设备看板
    @Author： 樊双峰
    @Date： 2018-06-30 2:05
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>设备看板维护</title>
    <script type="text/javascript" src="${request.getContextPath()}/js/jTopo/jtopo-0.4.8-min.js"></script>
    <script type="text/javascript" src="${request.getContextPath()}/js/jquery/jquery-1.7.2.js"></script>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background-color:#C7FDFD;
        border: 0px;
    }

    /* 外层轨道 START */
    html::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background: #CCCCCC;
        border-radius: 10px;
    }
    /* 外层轨道 END */

    /* 内层轨道 START */
    html::-webkit-scrollbar-thumb {
        display: block;
        width: 6px;
        margin: 0px auto;
        border-radius: 10px;
        background: #808080;
    }
    /* 内层轨道 END */

    li {
        list-style: none;
    }

    #contextmenu {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #ffffff none repeat scroll 0px 0px;
        box-shadow: 0px 0px 15px #fff;
        border-radius: 5px;
        display: none;
        list-style: outside none none;
        margin: 0px;
        padding: 0px;
        position: absolute;
    }

    #menu {
        border: 1px solid #aaa;
        border-bottom: 0px;
        background: #eee;
        position: absolute;
        list-style: none;
        margin: 0px;
        padding: 0px;
        display: none;
    }

    #menu li a {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #aaa;
        cursor: pointer;
    }

    #menu li a:hover {
        background: #fff;
    }

    /*.div_1 {*/
    /*background-color: #747E92;*/
    /*}*/

    /*.div_2 {*/
    /*background-color: #D22EC6;*/
    /*}*/

    .div_3,.div_4,.div_5,.div_6 ,.div_7,.div_8,.div_9,.div_10{
        border-radius: 5px;
        box-shadow: 0px 0px 15px #FFFFFF;
    }

    .div_3 {
        background:  rgb(84,165,49) no-repeat top left/0px 0px;
        background-color: rgb(84,165,49);
        /*-webkit-animation: mymove3 4s infinite;*/
        /*animation: mymove3 4s infinite;*/
    }

    /*@-webkit-keyframes mymove3 {*/
    /*50% {*/
    /*background: #fdced2 bottom right/50px 50px;*/
    /*}*/
    /*}*/

    /*@keyframes mymove3 {*/
    /*50% {*/
    /*background: #f95262 bottom right/50px 50px;*/
    /*}*/
    /*}*/

    .div_4 {
        background:rgb(0,0,255) no-repeat top left/0px 0px;
        /*-webkit-animation: mymove4 4s infinite;*/
        /*animation: mymove4 4s infinite;*/
        background-color:rgb(0,0,255);
    }

    /*@-webkit-keyframes mymove4 {*/
    /*50% {*/
    /*background: #fdfcce bottom right/50px 50px;*/
    /*}*/
    /*}*/

    /*@keyframes mymove4 {*/
    /*50% {*/
    /*background: #faf884 bottom right/50px 50px;*/
    /*}*/
    /*}*/

    .div_5 {
        background: rgb(241,194,50) no-repeat top left/0px 0px;
        /*-webkit-animation: mymove5 4s infinite;*/
        /*animation: mymove5 4s infinite;*/
        background-color:rgb(241,194,50);
    }

    /*@-webkit-keyframes mymove5 {*/
    /*50% {*/
    /*background: #ccffe3 bottom right/50px 50px;*/
    /*}*/
    /*}*/

    /*@keyframes mymove5 {*/
    /*50% {*/
    /*background: #66ffab bottom right/50px 50px;*/
    /*}*/
    /*}*/

    .div_6 {
        background-color: rgb(255,0,0);
        background: rgb(255,0,0) no-repeat top left/0px 0px;
        /*-webkit-animation: mymove6 4s infinite;*/
        /*animation: mymove6 4s infinite;*/
    }

    /*@-webkit-keyframes mymove6 {*/
    /*50% {*/
    /*background: #cce0ff bottom right/50px 50px;*/
    /*}*/
    /*}*/

    /*@keyframes mymove6 {*/
    /*50% {*/
    /*background: #4d94ff bottom right/50px 50px;*/
    /*}*/
    /*}*/

    .div_7 {
        background-color: #00CCFF;
        background: #00CCFF no-repeat top left/0px 0px;
        /*-webkit-animation: mymove7 4s infinite;*/
        /*animation: mymove7 4s infinite;*/
    }

    /*@-webkit-keyframes mymove7 {*/
    /*50% {*/
    /*background: #cce0ff bottom right/50px 50px;*/
    /*}*/
    /*}*/

    /*@keyframes mymove7 {*/
    /*50% {*/
    /*background: #4d94ff bottom right/50px 50px;*/
    /*}*/
    /*}*/


    .div_8 {
        background-color: #FF00FF;
        background: #FF00FF no-repeat top left/0px 0px;
        /*-webkit-animation: mymove8 4s infinite;*/
        /*animation: mymove8 4s infinite;*/
    }

    /*@-webkit-keyframes mymove8 {*/
    /*50% {*/
    /*background: #cce0ff bottom right/50px 50px;*/
    /*}*/
    /*}*/

    /*@keyframes mymove8 {*/
    /*50% {*/
    /*background: #4d94ff bottom right/50px 50px;*/
    /*}*/
    /*}*/

    .div_9 {
        background-color:#FFC000;
        background:#FFC000 no-repeat top left/0px 0px;
        /*-webkit-animation: mymove9 4s infinite;*/
        /*animation: mymove9 4s infinite;*/
    }

    /*@-webkit-keyframes mymove9 {*/
    /*50% {*/
    /*background: #cce0ff bottom right/50px 50px;*/
    /*}*/
    /*}*/

    /*@keyframes mymove9 {*/
    /*50% {*/
    /*background: #4d94ff bottom right/50px 50px;*/
    /*}*/
    /*}*/
    .div_10 {
        background-color:	rgb(232,232,232);
        background:rgb(232,232,232) no-repeat top left/0px 0px;
        /*-webkit-animation: mymove9 4s infinite;*/
        /*animation: mymove9 4s infinite;*/
    }


    .legend dl dt {
        margin: 10px 20px;
        float: left;
        height: 30px;
        font-size: 14px;
        font-family: "微软雅黑", "宋体";
        text-align: center;
        line-height: 30px;
        font-weight: 700;
    }

    .legend dl dd {
        float: left;
        width: 10px;
        height: 30px;
        font-family: "微软雅黑", "宋体";
    }

    .header-title {
        position: absolute;
        left: 62%;
        margin: 6px 100px;
        width: 300px;
        font-size: 25px;
        font-family: '微软雅黑';
        color: #ffffff;
        text-align: right;
        font-weight: 700;
    }

    em {
        font-style: normal;
        font-weight: 700;
    }
    </style>
</head>
<body>
<div class="row" id="board">
    <div class="bjui-pageHeader" style="height: 50px">
        %{--<div class="header-title">--}%
        %{--<div>EQUIPMENT BOARD</div>--}%
        %{--</div>--}%
        <div class="legend">
            %{--<dl>--}%
            %{--<dt class="div_1">RECOVERY</dt>--}%
            %{--<dd></dd>--}%
            %{--</dl>--}%
            %{--<dl>--}%
            %{--<dt class="div_2">ENG-PE, ENG-EE</dt>--}%
            %{--<dd></dd>--}%
            %{--</dl>--}%
        <dl>
            <dt class="div_3">&nbsp;RUN&nbsp;</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_10">&nbsp;IDLE,SHUTDOWN&nbsp;</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_4">&nbsp;PM,SETUP&nbsp;</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_5">&nbsp;ADDMON,DCWAFER,LENT,MONITOR,WAITMFG&nbsp;</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_6">&nbsp;ALARM,AUTO,DOWNMON,EQ,FAC,PROCESS,WARM&nbsp;</dt>
            <dd></dd>
        </dl>
            %{--<dl>--}%
                %{--<dt class="div_7">&nbsp;ENG,TUN&nbsp;</dt>--}%
                %{--<dd></dd>--}%
            %{--</dl>--}%
            %{--<dl>--}%
                %{--<dt class="div_8">&nbsp;SET&nbsp;</dt>--}%
                %{--<dd></dd>--}%
            %{--</dl>--}%
            %{--<dl>--}%
                %{--<dt class="div_9">&nbsp;FAC&nbsp;</dt>--}%
                %{--<dd></dd>--}%
            %{--</dl>--}%
        </div>
    </div>
    <div class="bjui-pageContent">
        <div>
            <ul id="contextmenu" style="display:none;position: absolute;">
                <li id="actualPower"></li>
            </ul>
            <ul id="menu" style="display:none;">
                <li><a>remove</a></li>
                <li><a>enlarge</a></li>
                <li><a>narrow</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    /* addNode */
    var currentNode = null;
    var tempcanvas = "<canvas id='canvas-drag' width='1363' height='700'>" + "</canvas>";

    /**
     * 获取设备
     */
    function getEqpInfo() {
        $("#board").after(tempcanvas);
        var canvas = document.getElementById('canvas-drag');
        var context = canvas.getContext('2d');
        canvas.width = screen.width;
        canvas.height = screen.height;
        var stage = new JTopo.Stage(canvas);
        var scene = new JTopo.Scene(stage);
        // scene.alpha = "3";
        //scene.setBackground('${request.getContextPath()}/images/bg.jpg');
//        stage.click(function (event) {
//            if (event.button == 0) {// 右键
//                $("#menu").hide();
//            }
//        });
        $.ajax({
            type: 'GET',
            url: '${request.getContextPath()}/EqpBoard/getEqpInfo.json',
            dataType: 'json',
            async: true,
            success: function (rst) {
                $.each(rst, function (index, item) {
                    var node = new JTopo.Node(index);
                    node.setLocation(item.X, item.Y);
                    node.dragable = true;
                    node.setSize(item.WIDTH, item.HEIGHT);
                    node.fillColor = item.COLOR;
                    node.text = '微软雅黑';
                    node.font = '12px 微软雅黑';
                    node.fontColor = '0,0,0';
                    node.textPosition = 'Middle_Center';
                    node.textOffsetY = -6;
                    node.borderWidth = 2;
                    node.borderColor = '0,0,0';
                    node.text = item.EQP_ID;
                    scene.add(node);

                    /* 放大缩小 START */
                    node.addEventListener('mouseup', function (event) {
                        currentNode = this;
                        handler(event);
                        var nodeId = item.ID;
                        $("#menu li").click(function () {
                            var text = $(this).text();
                            if (text == 'enlarge') {
                                $.ajax({
                                    url: "${request.getContextPath()}/EqpBoard/deformation?id=" + Number(nodeId) + "&act=" + '0',
                                    success: function () {
                                        return;
                                    }
                                });
                                currentNode.scaleX += 0.2;
                                currentNode.scaleY += 0.2;
                            } else if (text == 'narrow') {
                                $.ajax({
                                    url: "${request.getContextPath()}/EqpBoard/deformation?id=" + Number(nodeId) + "&act=" + '1',
                                    success: function () {
                                        return;
                                    }
                                });
                                currentNode.scaleX -= 0.2;
                                currentNode.scaleY -= 0.2;
                            } else if (text == 'remove') {
                                $.ajax({
                                    url: "${request.getContextPath()}/EqpBoard/removeEqp?id=" + Number(nodeId),
                                    success: function () {
                                        return;
                                    }
                                });
                                scene.remove(currentNode);
                                currentNode = null;
                            }
                            $("#menu").hide();
                        });

                    });
                    /* 放大缩小 END */

                    /* 拖拽 START */
                    node.addEventListener('mouseup', function (event) {
                        if (event.button == 0) {
                            $.ajax({
                                url: "${request.getContextPath()}/EqpBoard/changeLocation?id=" + Number(item.ID) + "&x=" + node.x + "&y=" + node.y,
                                success: function () {
                                    return;
                                }
                            });
                        }
                    });
                    /* 拖拽 END */

                    /* 鼠标悬浮事件 START*/
                    node.addEventListener('dbclick', function (event) {
                        var str = "<p><em>设备名：</em>" + "<span style='color: #ff0000;'>" + item.EQP_ID + "</span>" + "</p><p><em>设备描述：</em>" + "<span style='color: #ff0000;'>" + item.DESCRIPTION + "</span>";
                        $("#actualPower").html(str);
                        $("#contextmenu").css({
                            top: event.pageY,
                            left: event.pageX
                        }).show();
                    });
                    /* 鼠标悬浮事件 END*/

                    /* 鼠标移出事件 START*/
                    node.addEventListener('mouseout', function () {
                        $("#contextmenu").hide();
                        $("#menu").hide();
                    });
                    /* 鼠标移出事件 START*/
                });
            }
        });
    }

    function handler(event) {
        if (event.button == 2) {// 右键
            $("#menu").css({
                top: event.pageY,
                left: event.pageX
            }).show();
        }
    }

    $(document).ready(function () {
        getEqpInfo();
    });

    setInterval(function () {
        $("#canvas-drag").remove();
        getEqpInfo();
    }, 120000);
</script>